import { Component, Vue, Watch } from 'vue-property-decorator'

import style from '../AuthorizeApp/AuthorizeApp.less'
import styles from '../NewApply/NewApply.less'
import OperationCol from '@/components/OperationCol'
import SealStatus from '@/components/SealStatus'
import { Action } from 'vuex-class'
import { ElTable } from 'element-ui/types/table'
import TableEmpty from '@/components/tableEmpty'

export const projectStatus = [
  { key: 1, color: '#52C41A', text: '启用' },
  { key: 2, color: '#BFBFBF', text: '停用' },
]

export const APP_INTERFACE_TYPE: any = {
  1: 'Ukey签章',
  2: '云签章',
  3: 'Ukey签章',
  4: '云签章',
}

/**
 *查看印章已授权应用
 *
 * @export
 * @class ManageSealRefProject
 * @extends {Vue}
 */
@Component<ManageSealRefProject>({
  props: {},
  computed: {},
  methods: {},
  watch: {},
})
export default class ManageSealRefProject extends Vue {
  authorized: number = 0 // 是否被授权印章管理员 1:授权 2:未授权
  getTypeList: any[] = [
    { id: 0, name: '云签章应用' },
    { id: 1, name: 'Ukey签章应用' },
  ]
  loading: boolean = false
  projectId: string = ''
  appName: string = ''
  developer: string = ''
  orgName: string = ''
  appList: any[] = []
  pageIndex: number = 1
  pageSize: number = 10
  total: number = 0
  cascaderProps = {
    value: 'uuid',
    label: 'fullName',
    children: 'subList',
  }
  options = []
  area: string = ''
  areaOption: any[] = []
  // readonly
  sealCode: string = ''
  type: number = 0

  @Action('project/queryProjectManageSealAuthorizeListBySeal')
  queryProjectManageSealAuthorizeListBySeal!: any
  @Action('applyPage/getAreas') getAreas!: any
  // @Action('paymentOrder/queryByOrderId')  queryByOrderId!: any
  protected render() {
    return (
      <div class={[style.flex]}>
        <div class={[style.orderList]}>
          <div class={style.content}>
            <el-form ref="elform">
              <div>
                <el-row>
                  <el-col span={8}>
                    <el-form-item label="应用ID">
                      <el-input v-model={this.projectId} placeholder="" />
                    </el-form-item>
                  </el-col>
                  <el-col span={8}>
                    <el-form-item label="应用名称">
                      <el-input v-model={this.appName} placeholder="" />
                    </el-form-item>
                  </el-col>
                  <el-col span={8}>
                    <el-form-item label="应用主管单位">
                      <el-input v-model={this.orgName} placeholder="" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col span={8}>
                    <el-form-item label="应用开发单位">
                      <el-input v-model={this.developer} placeholder="" />
                    </el-form-item>
                  </el-col>
                  <el-col span={8}>
                    <el-form-item label="应用主管单位区域">
                      <el-cascader
                        ref="areaSelect"
                        v-model={this.areaOption}
                        placeholder="默认全部区域"
                        options={this.options}
                        // onVisible-change={this.areaOptionBlur}
                        show-all-levels={false}
                        {...{
                          props: { props: this.cascaderProps },
                        }}
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div>
                <el-form-item>
                  <el-button size="mini" type="primary" onClick={this.query}>
                    搜索
                  </el-button>
                  <el-button size="mini" onClick={this.reset}>
                    重置
                  </el-button>
                </el-form-item>
              </div>
            </el-form>
            <el-table
              data={this.appList}
              style="width: 100%"
              v-loading={this.loading}
              ref="table"
            >
              <TableEmpty
                v-show={!this.loading}
                slot="empty"
                msg={`当前查询条件下暂无已授权的${
                  this.type === 1 ? 'UKEY' : '云'
                }签章应用`}
              >
                <el-button type="primary" onClick={this.authorizeApp}>
                  前往授权新应用
                </el-button>
              </TableEmpty>
              <el-table-column
                prop="projectId"
                label="应用ID"
                min-width="100"
                show-overflow-tooltip
              />
              <el-table-column
                prop="projectName"
                label="应用名称"
                min-width="150"
                show-overflow-tooltip
              />
              <el-table-column
                prop="projectOrganizeName"
                label="应用主管单位"
                min-width="150"
                show-overflow-tooltip
              />
              <el-table-column
                prop="developerName"
                label="应用开发单位"
                min-width="150"
                show-overflow-tooltip
              />
              <el-table-column
                prop="validType"
                label="对接方式"
                min-width="100"
                show-overflow-tooltip
                {...{
                  scopedSlots: {
                    default: (scope: any) => {
                      return APP_INTERFACE_TYPE[scope.row.validType]
                    },
                  },
                }}
              />
              <el-table-column
                prop="sealAuthorizeCount"
                label="已授权印章数量"
                min-width="120"
                show-overflow-tooltip
              />
              <el-table-column
                prop="status"
                label="状态"
                min-width="90"
                show-overflow-tooltip
                {...{
                  scopedSlots: {
                    default: (scope: any) => {
                      return (
                        <SealStatus
                          statusData={projectStatus.find(
                            item => scope.row.status === item.key
                          )}
                        />
                      )
                    },
                  },
                }}
              />
              <el-table-column
                prop="id"
                label="操作"
                min-width="130"
                {...{
                  scopedSlots: {
                    default: (scope: any) => {
                      return (
                        <OperationCol
                          operations={this.filterOpera(scope.row)}
                          showNum={4}
                          row={scope.row}
                          index={scope.$index}
                        />
                      )
                    },
                  },
                }}
              />
            </el-table>
            {this.appList && this.appList.length > 0 && (
              <el-pagination
                class={{ [styles.pagination]: true }}
                onSize-change={this.handleSizeChange}
                onCurrent-change={this.handleCurrentChange}
                current-page={this.pageIndex}
                page-sizes={[10, 20, 30]}
                page-size={this.pageSize}
                layout="total, sizes, prev, pager, next, jumper"
                total={this.total}
                pager-count={5}
              />
            )}
          </div>
        </div>
      </div>
    )
  }

  handleSizeChange(val: number) {
    this.pageIndex = 1
    this.pageSize = val
    this.queryList()
  }

  handleCurrentChange(val: number) {
    this.pageIndex = val
    this.queryList()
  }

  authorizeApp() {
    this.$router.push({ name: 'authorizeNew' })
  }

  async queryList() {
    this.loading = true
    await this.$nextTick()
    await this.queryProjectManageSealAuthorizeListBySeal({
      pageIndex: this.pageIndex,
      pageNumber: this.pageSize,
      developerName: this.developer,
      projectName: this.appName,
      projectOrganizeName: this.orgName,
      projectId: this.projectId,
      organizeUuid: this.area,
      sealCode: this.sealCode,
    })
      .then(async (res: any) => {
        await this.$nextTick()
        this.appList = (res || {}).list || []
        this.total = res.total
      })
      .catch(() => {})
    this.loading = false
    const table = this.$refs.table as ElTable
    table.doLayout()
  }

  @Watch('areaOption')
  areaOptionChange(val: any) {
    this.area = (typeof val === 'object' ? val[val.length - 1] : val) || ''
  }

  async created() {
    this.getAreas().then((data: any) => {
      this.options = data
    })
    this.sealCode = (this.$route.query.sealCode as string) || ''
    this.type = parseInt((this.$route.query.type as string) || '0')
    if (this.sealCode) {
      this.query()
    }
  }

  filterOpera(row: any) {
    return [
      {
        id: 1,
        text: '详情',
        onClick: (index: number, rows: any) => {
          this.$router.push({
            name: 'projectDetail',
            query: { id: rows.projectId },
          })
        },
      },
    ]
  }

  query() {
    this.pageIndex = 1
    this.queryList()
  }

  reset() {
    this.appName = ''
    this.developer = ''
    this.orgName = ''
    this.projectId = ''
    this.area = ''
    this.areaOption = []
    this.query()
  }
}
